<script lang="ts" setup>
import { computed } from 'vue';
import { Tooltip } from '@ark-ui/vue/tooltip'
import AtomGit from './assets/atomgit.png'
import Gitee from './assets/gitee.png'
import GitCode from './assets/gitcode.png'
import GitHub from './assets/github.png'

interface Platform {
  name: string;
  img: string;
}

defineOptions({
  name: 'PlatformAvatar',
});

const props = defineProps({
  platform: {
    type: String,
    default: '',
  },
  tooltip: {
    type: Boolean,
    default: false,
  },
  iconClass: {
    type: String,
    default: '',
  },
});

const platformMap: Record<string, Platform> = {
  atomgit: { name: 'AtomGit', img: AtomGit },
  gitee: { name: 'Gitee', img: Gitee },
  github: { name: 'GitHub', img: GitHub },
  gitcode: { name: 'GitCode', img: GitCode },
}

const currentPlatform = computed(() => (platformMap[props.platform] ?? null));
</script>

<template>
  <div class="component-platform-avatar">
    <Tooltip.Root
      lazy-mount
      unmount-on-exit
      :open-delay="100"
      :close-delay="100"
      :disabled="!props.tooltip || !currentPlatform"
      :positioning="{
        placement: 'right-start',
        offset: { mainAxis: 4, crossAxis: -10 },
      }"
    >
      <Tooltip.Trigger class="bg-transparent" as-child>
        <img :data-src="currentPlatform.img" :alt="props.platform" class="lozad block" :class="iconClass" v-if="currentPlatform">
      </Tooltip.Trigger>
      <Tooltip.Positioner class="z-1!">
        <Tooltip.Content class="flex-y-center">
          <div class="size-0 border-b-6 border-r-6 border-t-6 border-b-transparent border-r-#1E2022/70 border-t-transparent"></div>
          <div class="rounded-4 bg-#1E2022/70 px-12 py-8 text-12 text-#fff font-500 leading-20">
            {{ $t('common.platform.name', { platform: currentPlatform.name }) }}
          </div>
        </Tooltip.Content>
      </Tooltip.Positioner>
    </Tooltip.Root>
  </div>
</template>

<style lang="scss" scoped>
</style>
